<template>
  <div>
    <div class="swiper f-loop-content">
      
      
      <ul>
        <li v-for=" (list,index) in swiperList " :key="index">{{list}}</li>
      </ul>
    </div>
    
    <!-- <div class="awesome">
      <swiper :options="swiperOption" ref="mySwiper">
      
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>

      </swiper>
    </div> -->
    
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "swiper",
  data() {
    return {
      swiperList: [
        "恭喜嘟嘟获得500元优惠券",
        "恭喜可可获得400元优惠券",
        "恭喜牛牛获得300元优惠券",
        "恭喜乐乐获得200元优惠券"
      ],
      swiperOption: {
       // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
       notNextTick: true,
       // swiper configs 所有的配置同swiper官方api配置
       autoplay: 3000,
     
     }
    };
  },

  created() {
 
  },
  methods: {},
  components: {
    swiper,
    swiperSlide
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "./swiper.scss";
</style>
